<html>
<body onload="updateAll(-1)">

<br>
<a href="javascript:updateAll(0)">first</a>
<a href="javascript:updateAll(1)">second</a>
<a href="javascript:updateAll(2)">third</a>
<br>
<br>
<form name="selectors">
<input type="radio" name="cpu" value="0" onclick="updateAll(-1)" checked> cpu
<input type="radio" name="cpu" value="1" onclick="updateAll(-1)"> wall
<br>
<input type="radio" name="normalization" value="0" onclick="updateAll(-1)" checked> normalized
<input type="radio" name="normalization" value="1" onclick="updateAll(-1)"> mixed
<input type="radio" name="normalization" value="2" onclick="updateAll(-1)"> raw
<br>
<input type="radio" name="match" value="0" onclick="updateAll(-1)" checked> best
<input type="radio" name="match" value="1" onclick="updateAll(-1)"> running
<input type="radio" name="match" value="2" onclick="updateAll(-1)"> doctest
<input type="radio" name="match" value="3" onclick="updateAll(-1)"> total
</form>
<hr>
{% for doctest in doctests %}
<div id="{{doctest.id}}">
<h3>{{doctest.doctest}}</h3>
{% for example in doctest.examples %}
<div id="{{example.id}}" style="padding: 0px">
<div id="{{example.id}}-blurb" style="position: absolute; right: 10px;">blurb</div>
<pre style="margin: 0px">{{example.source.strip()|escape}}
{{example.want|escape}}</pre>
</div>
{% endfor %}
</div>
{% endfor %}
<script>

function valueOf(radio) {
    for(var i = 0; i < radio.length; i++) {
        if(radio[i].checked) {
            return radio[i].value;
        }
    }
}


function updateAll(signal) {
    if (signal == -1) {
        elements = document.forms['selectors'].elements;
        signal = 12 * valueOf(elements['cpu']) + 4 * valueOf(elements['normalization']) + 1 * valueOf(elements['match']);
    }
    for (var i = 0; i < data.length; i++) {
        if (template) {
            id = "{{example.id}}";
        } else {
            id = "" + i;
        }
        document.getElementById(id).style.background = data[i][signal][1];
        document.getElementById(id + "-blurb").innerHTML = data[i][signal][2];
    }
}

var data = new Array();
data[0] = [["#0F0", "good"], ["#FF0", "OK"], ["#F00", "bad"]];
var template = true;

/* {{"*" + "/"}}

template = false;

{% for ix, stat in enumerate(stats) %}
data[{{ix}}] = {{stat}};
{% endfor %}

{{"/" + "*"}} */

</script>
</body>
</html>